.details {
    display: flex;
    align-items: stretch;
    flex-direction: column;
    justify-content: flex-start;
    user-select: text;
    width: 100%;

    &__attachment-md-title {
        padding-top: 10px;
        padding-bottom: 20px;
        font-size: $large-header-font-size;
        font-weight: lighter;
        color: var(--md-title-color);
        text-align: var(--md-header-title-align);
        clear: both;
        border-top: var(--md-header-border);
        margin-right: 10px;
    }

    &__attachment-md-title:before {
        padding-top: 5px;
    }

    &__attachment-md-title > .fa.fa-markdown {
        vertical-align: text-top;
        color: var(--md-icon-color);
    }

    &__back-button {
        display: none;
        @include mobile {
            display: block;
            padding-bottom: $base-padding-v;
            cursor: pointer;
            line-height: $mobile-back-button-height;
            height: $mobile-back-button-height;
            font-size: 1.2em;
            > i {
                margin-right: 0.7em;
                font-size: 1.2em;
                vertical-align: middle;
                position: relative;
                top: -0.15em;
            }
        }
    }

    &__header {
        display: flex;
        align-items: flex-start;
        padding-bottom: $small-spacing;
        overflow: visible;
        min-height: 40px;
        &-title {
            user-select: text;
            flex: 1;
            align-self: flex-start;
            cursor: text;
            margin: 0 6px;
            padding: 3px 6px 1px;
            overflow: hidden;
            text-overflow: ellipsis;
            border-radius: var(--input-border-radius);
            border: 1px solid transparent;
            // why px and not em? it's like this to prevent jumping in different browsers
            // when switching from a div to an input and vice versa
            height: 42px;
            line-height: 40px;
            white-space: nowrap;
            &:hover {
                transition: border-color $base-duration $base-timing;
                border: 1px solid var(--light-border-color);
                @include mobile {
                    border-color: transparent;
                }
            }
        }
        input.details__header-title-input {
            // see the comment about px above
            height: 48px;
            line-height: 40px;
            user-select: text;
            flex: 1;
            margin: 0 6px;
            padding: 0 6px;
            font-size: $large-header-font-size;
            font-weight: bold;
            min-width: 0;
            @include mobile {
                width: 100%;
            }
        }
        &-color {
            user-select: none;
            font-size: $large-header-font-size;
            padding-top: 0.1em;
        }
        &-icon {
            @include area-selectable();
            user-select: none;
            display: inline;
            font-size: $large-header-font-size;
            padding-top: 0.1em;
            border-radius: var(--block-border-radius);
            width: 1.8em;
            height: 1.5em;
            text-align: center;
        }
        &-icon-img {
            vertical-align: middle;
        }
    }

    &__colors-popup {
        user-select: none;
        display: none;
        position: absolute;
        z-index: $z-index-no-modal;
        border-radius: $base-border-radius;
        background: var(--background-color);
        box-shadow: 0 0 3px var(--background-color);
        left: 0.2em;
        font-size: $large-header-font-size;
        &:hover,
        .details__header-color:hover & {
            @include nomobile {
                display: block;
            }
        }
        &-item {
            padding: 0 12px 0;
            cursor: pointer;
            display: block;
            position: relative;
            &--active {
                &:before {
                    content: $fa-var-bookmark;
                }
            }
            &:hover {
                &:after {
                    content: $fa-var-bookmark;
                    opacity: 0.3;
                    position: absolute;
                    left: 0.4em;
                }
            }
        }
    }

    &__body {
        flex: 1;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        flex-wrap: wrap;
        @include scrollbar-on-hover;
        position: relative;
        overflow: hidden;

        .details--drag & {
            display: none;
        }

        > .scroller {
            flex: 1;
            display: flex;
            align-items: stretch;
            align-content: flex-start;
            flex-direction: row;
            justify-content: flex-start;
            flex-wrap: wrap;
            overflow-x: hidden;
            padding-top: 3px;
            @media screen and (-webkit-min-device-pixel-ratio: 0) {
                width: 100% !important;
            }
        }

        &-fields {
            flex: 1 0 50%;
            min-width: 0;
            margin-right: $base-padding-h;
        }

        &-aside {
            flex: 0 0 auto;
            display: flex;
            align-items: stretch;
            flex-direction: column;
            justify-content: flex-start;
            @include mobile {
                width: 100%;
            }
        }

        &-after {
            flex: 100% 1 0;
        }
    }

    &__field {
        $details-field-line-height: 20px;

        display: flex;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-start;
        margin-bottom: 0.5em;
        position: relative;

        &-label {
            color: var(--muted-color);
            width: 7em;
            text-align: right;
            cursor: pointer;
            padding-right: 1em;
            border: 1px solid transparent;
            line-height: $details-field-line-height;
            position: relative;
            &:hover {
                color: var(--medium-color);
            }
            .details__field--can-edit-title & {
                cursor: text;
            }
            > input {
                margin: 0 0 0 2px;
                padding: 0 $base-padding-h;
                line-height: $details-field-line-height;
                height: $details-field-line-height;
                width: 100%;
                color: var(--text-color);
                .chrome & {
                    padding-bottom: 1px;
                } // TODO: find a better cross-browser way to do it
            }
        }
        &-value {
            flex: 1;
            user-select: text;
            align-self: flex-start;
            position: relative;
            cursor: text;
            padding: 0 $base-padding-h;
            border: 1px solid transparent;
            min-height: $details-field-line-height;
            box-sizing: border-box;
            line-height: $details-field-line-height;
            overflow: hidden;
            text-overflow: ellipsis;
            margin-right: 2em;
            &-add-label {
                color: transparent;
            }
            .details__field--editable & {
                border-radius: var(--input-border-radius);
                &:hover {
                    @include nomobile {
                        transition: border-color $base-duration $base-timing;
                        border: 1px solid;
                        border-color: var(--light-border-color);
                        box-shadow: 0 0 3px rgba(0, 0, 0, 0.06);
                        .details__field-value-add-label {
                            color: var(--muted-color);
                            transition: color $base-duration $base-timing;
                        }
                    }
                }
            }
            .details__field--protect & {
                user-select: none;
            }
            .details__field--multiline & {
                width: 0;
                white-space: pre-wrap;
            }
            .details__field--url & {
                height: $details-field-line-height + 2px;
            }
            .details__field--edit &,
            .details__field--edit.details__field--editable &,
            .details__field--edit.details__field--editable:hover & {
                border: 0 solid transparent;
                padding: 0;
                overflow: visible;
            }
            > input,
            > textarea {
                margin: 0;
                padding: 0 $base-padding-h;
                line-height: $details-field-line-height;
                width: 100%;
                height: 20px;
                .details__field--protected & {
                    font-family: $monospace-font-family;
                }
                .details__field--can-gen & {
                    padding-right: 2.4em;
                }
                transition: background-color $slow-transition-out, border-color $slow-transition-out;
                .details__field--edit[active-mobile-action] & {
                    transition: background-color $slow-transition-in,
                        border-color $slow-transition-in;
                }
                .details__field--edit[active-mobile-action='apply'] & {
                    background: var(--action-color);
                }
                .details__field--edit[active-mobile-action='cancel'] & {
                    background: var(--error-color);
                    border-color: var(--error-color);
                }
                @include mobile {
                    border-color: transparent !important;
                }
            }
            > input {
                .chrome & {
                    padding-bottom: 1px;
                } // TODO: find a better cross-browser way to do it
            }
            > textarea {
                display: block;
                resize: none;
                line-height: 1.5em;
                overflow: hidden;
            }
            > label {
                font-weight: normal;
                user-select: none;
            }
            > a {
                max-width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
            }
            .details__body-aside & {
                color: var(--muted-color);
                a {
                    color: var(--muted-color);
                }
                width: 13em;
                padding-right: 0;
                margin-right: 0;
                flex: 0 0 auto;
            }
            &-btn {
                @include position(absolute, -0.2em 0 null null);
                color: var(--muted-color);
                cursor: pointer;
                &:hover {
                    color: var(--medium-color);
                }
                &:before {
                    @include position(absolute, 0 0 null null);
                    @include fa-icon;
                    cursor: pointer;
                    padding: 0.3em $base-padding-h;
                }
            }
            &-btn-gen:before {
                content: $fa-var-bolt;
            }
            &-btn-protect {
                &:before {
                    content: $fa-var-unlock;
                }
                .details__field--protected & {
                    &:before {
                        content: $fa-var-lock;
                    }
                }
            }
            @include mobile {
                &-btn-apply,
                &-btn-cancel {
                    height: 100%;
                    width: 50%;
                    position: absolute;
                    top: 0;
                    user-select: none;
                    &:before {
                        padding: 0.2em 1.5em;
                    }
                    background: var(--background-color);
                }
                &-btn-apply {
                    &:before {
                        content: $fa-var-check;
                    }
                    right: 0;
                }
                &-btn-cancel {
                    &:before {
                        content: $fa-var-x;
                    }
                    left: 0;
                }
            }
            &--select {
                border-width: 0;
                padding: 0;
                .details__field--editable:hover & {
                    border-width: 0;
                }
            }
            &--revealed {
                font-family: $monospace-font-family;
            }
            > select {
                margin: 0;
                width: 100%;
                padding: 0 $base-padding-h;
            }
            .markdown {
                white-space: normal;
                h6 {
                    font-size: 1rem;
                }
                h5 {
                    font-size: modular-scale(1, 1rem, 1.05);
                }
                h4 {
                    font-size: modular-scale(2, 1rem, 1.05);
                }
                h3 {
                    font-size: modular-scale(3, 1rem, 1.05);
                }
                h2 {
                    font-size: modular-scale(4, 1rem, 1.05);
                }
                h1 {
                    font-size: $small-header-font-size;
                }
                ul,
                ol {
                    margin-bottom: 1em;
                }
                ul {
                    list-style-type: initial;
                }
                ol {
                    list-style-type: decimal;
                }
                li {
                    margin-left: 2em;
                }
            }
            .details__field--options & {
                margin-right: 0;
            }
        }

        &--no-select {
            .details__field-label,
            .details__field-value {
                user-select: none;
            }
        }

        @include mobile {
            border-bottom: light-border();
            padding-bottom: 0.5em;
        }

        &-options {
            color: var(--muted-color);
            cursor: pointer;
            opacity: 0;
            transition: opacity $slow-transition-out, color $base-duration $base-timing;
            align-self: flex-start;
            width: 2em;
            text-align: center;
            padding-top: 0.1em;
            .details__field:hover & {
                opacity: 1;
                transition: opacity $slow-transition-in;
            }
            &:hover {
                color: var(--medium-color);
            }
        }

        &-mobile-actions {
            position: absolute;
            background: var(--background-color);
            z-index: $z-index-no-modal;
        }

        &-mobile-action {
            padding: $medium-padding;
            cursor: pointer;
        }
    }

    &__attachments {
        flex: 1;
        display: flex;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-end;
        flex-wrap: wrap;
        user-select: none;
        overflow: hidden;
        white-space: nowrap;
        .details--drag & {
            display: none;
        }
    }

    &__attachment {
        @include bg-btn();
        align-self: flex-end;
        flex: 0 1 auto;
        margin-right: $small-spacing;
        margin-top: $small-spacing;
        &--active,
        &--active:hover {
            @include bg-btn-active();
        }
    }

    &__attachment-add {
        @include icon-btn();
        user-select: none;
        align-self: flex-end;
        flex: 0 0 auto;
        color: var(--muted-color);
        margin-right: $small-spacing;
        text-align: center;
        overflow: hidden;
        &:hover {
            color: var(--medium-color);
        }
        &-title {
            display: none;
            transition: color $slow-transition-out;
            margin-right: $base-padding-h;
            color: transparent;
            .details__attachment-add:hover & {
                display: inline;
                transition: color $slow-transition-in;
                color: var(--muted-color);
            }
        }
    }

    &__attachment-preview {
        margin-right: $base-padding-h;
        width: 100%;

        .markdown {
            width: 80%;
            margin-left: auto;
            margin-right: auto;
            padding-bottom: 40px;
            color: var(--md-text-color);

            .markdown-alert > .fa {
                vertical-align: baseline;
            }

            .markdown-alert-title {
                font-size: 12pt;
                padding-left: 5px;
                margin: 2px;
            }

            .markdown-alert > p:nth-of-type(2) {
                font-size: 10pt;
                margin-bottom: 5px;
            }

            code {
                color: var(--md-code-inline-text-color);
                font-weight: var(--md-code-inline-text-weight);
                padding: 3px 7px;
                background-color: var(--md-code-bg-color);
                border-radius: 6px;
                font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
            }

            pre > code {
                font-size: 9pt;
                font-weight: var(--md-code-block-text-weight);
                font-family: ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;
                color: var(--md-code-block-text-color);
                padding: 10px;
                padding-left: 15px;
                white-space: pre-wrap;
                display: block;
                grid-template-columns: min-content auto;
                grid-template-rows: auto;
                line-height: 2.0;
                border-left: var(--md-code-block-accent-style);
            }

            table code {
                background-color: var(--md-table-inline-codeblock-bg-color);
            }

            p {
                line-height: 1.8;
                margin-block-start: calc((var(--md-paragraph-spacing-start) - 1) * 1em);
                margin-block-end: calc((var(--md-paragraph-spacing-end) - 1) * 1em);
            }

            abbr[title] {
                text-decoration: underline dotted var(--md-accent-abbr-line-color);
                color: var(--md-accent-abbr-color);
            }

            a {
                color: var(--md-link-n-color);
                text-decoration: underline dotted var(--md-link-decorator-color);
                border: none;
            }

            a:hover {
                color: var(--md-link-h-color);
                text-decoration: none;
                border: none;
            }

            em {
                color: var(--md-accent-em-color);
                font-style: italic;
            }

            s, del {
                color: var(--md-accent-strike-text-color);
                text-decoration: line-through var(--md-accent-strike-line-color);
            }

            strong {
                color: var(--md-accent-strong-color);
                font-weight: bold;
            }

            *:not(font) > em > strong, *:not(font) > strong > em
            {
                background-clip: text;
                -webkit-background-clip: text;
                -webkit-text-fill-color: transparent;
                background-color: #FFFFFF;
                background-image: linear-gradient(120deg, var(--md-strong-em-color-1) 0%, var(--md-strong-em-color-2) 80%);
            }

            ul > li, ol > li {
                padding-top: 0.7000em;
                padding-bottom: 0.1075em;
            }

            .checkbox-wrapper {
                float: left;
            }

            input[type=checkbox] {
                -webkit-appearance: none;
                appearance: none;
                background-color: var(--md-checkbox-bg-unchecked-color);
                margin: 0;
                display: grid;
                place-content: center;
                width: 1.25em;
                height: 1.25em;
                border-radius: 50%;
                margin-right: 5px;
                padding-bottom: 4px;
                border: 1px solid var(--md-checkbox-border-unchecked-color);
                cursor: pointer;

                &:checked {
                    border-radius: 50%;
                    border: none;
                    background-repeat: no-repeat;
                    background-position: center;
                    background-size: 100%;
                    background-image: url('data:image/svg+xml; utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23FFFFFF"><path d="m10 15.586-3.293-3.293-1.414 1.414L10 18.414l9.707-9.707-1.414-1.414z"></path></svg>');
                    background-color: var(--md-checkbox-bg-checked-color);

                    &::before {
                        transform: scale(1);
                    }
                }

                &::before {
                    content: "";
                    width: 1.25em;
                    height: 1.25em;
                    transition: all 300ms ease-in;
                    transform: scale(1.02);
                    opacity: 1;
                    border-radius: 50%;
                }

                &:hover {
                    transition: all 200ms ease-in-out;
                    transform: scale(1.30);
                    opacity: 1;
                    background-color: var(--md-checkbox-bg-hover-color);
                    border: 1px solid var(--md-checkbox-border-hover-color);
                }
            }

            :is(ol, ul) {
                padding-inline-start: var(--md-ul-indent);
                margin-block-start: calc((var(--md-ul-spacing-start) - 1) * 1em);
                margin-block-end: calc((var(--md-ul-spacing-end) - 1) * 1em);
            }

            blockquote {
                padding: 0.5em 0.5em 0.5em 0.6em;
                border-left: 5px solid var(--md-blockquote-accent-color);
                background-color: var(--md-blockquote-body-bg-color);
                border-radius: 4px;
                margin-inline-start: 4.5%;
                margin-inline-end: 2.5%;
                margin-block-start: 1em;
                margin-block-end: 1em;
                padding-left: 15px;
                color: var(--md-blockquote-text-color);
                font-style: var(--md-blockquote-text-style);
            }

            blockquote > p {
                padding-top: 3px;
                padding-bottom: 3px;
                margin: 0px;
            }

            blockquote > :last-child {
                margin-bottom: 0;
            }

            blockquote > :first-child {
                margin-top: 0;
            }

            blockquote p {
                margin-left: 1px;
                margin-right: 0;
                font-size: 1em;
            }

            blockquote code {
                background-color: var(--md-blockquote-inline-codeblock-bg-color);
            }

            > hr {
                border-image: linear-gradient(to right, transparent 0%, var(--md-hr-color-1) 20%, var(--md-hr-color-2) 40%, var(--md-hr-color-3) 60%, var(--md-hr-color-4) 80%, transparent 100%) 1;
                border-width: 2px;
                flex: 1 0 0;
                margin-top: 30px;
                margin-bottom: 30px;
            }

            h1, h2, h3, h4, h5, h6 {
                a {
                    font-weight: var(--md-hx-link-weight);
                    font-size: 9pt;
                    vertical-align:  var(--md-hx-link-align);
                }
            }

            h1 {
                padding-top: 20px;
                color: var(--md-h1-color);
                font-weight: var(--md-h1-text-weight);
                text-transform: var(--md-h1-text-transform);
            }

            h2 {
                margin-block-start: 25px;
                color: var(--md-h2-color);
                font-weight: var(--md-h2-text-weight);
                text-transform: var(--md-h2-text-transform);
            }

            h3 {
                margin-block-start: 25px;
                color: var(--md-h3-color);
                font-weight: var(--md-h3-text-weight);
                text-transform: var(--md-h3-text-transform);
            }

            h4 {
                margin-block-start: 15px;
                color: var(--md-h4-color);
                font-weight: var(--md-h4-text-weight);
                text-transform: var(--md-h4-text-transform);
            }

            h5 {
                margin-block-start: 15px;
                color: var(--md-h5-color);
                font-weight: var(--md-h5-text-weight);
                text-transform: var(--md-h5-text-transform);
            }

            h6 {
                margin-block-start: 15px;
                color: var(--md-h6-color);
                font-weight: var(--md-h6-text-weight);
                text-transform: var(--md-h6-text-transform);
            }

            > ul:not(:has(input)) {
                list-style-type: disc;
                list-style-position: outside;
                font-weight: var(--md-ul-text-weight);
                margin-left: -5px;
                > li, ul {
                    list-style-type: revert-layer;
                    list-style-position: outside;
                    margin-left: 20px;
                    font-weight: var(--md-ul-text-weight);
                }
            }

            > ul:has(input) {
                margin-left: -20px;
                list-style-type: none;
                > li, ul {
                    margin-left: 20px;
                    input {
                        display: inline;
                    }
                }
            }

            > ol {
                list-style-type: number;
                list-style-position: inside;

                > li, ol {
                    list-style-type: number;
                    list-style-position: outside;
                    margin-left: 20px;
                }

                > li, p {
                    margin-top: 0px;
                    margin-bottom: 0px;
                }
            }

            img {
                box-sizing: content-box;
                border-style: none;
                padding-top: 10px;
                padding-bottom: 10px;
            }

            a:has(img){
                border: none;
            }

            img[src*="shields.io"] {
                box-sizing: content-box;
                border-style: none;
                padding-left: 3px;
                padding-right: 3px;
            }

            /*
                Table Colors
            */

            table {
                background-color: var(--md-table-border-outside-color);
                padding: 3px;
                min-width: 60%;
                border-collapse: initial;
                border-spacing: 0;
                margin-bottom: 20px;
                margin-left: auto;
                margin-right: auto;
                margin-top: 25px;
            }

            table:not([ class ] ) tbody tr
            {
                background-color: var(--md-table-body-bg-color)
            }

            table:not([class]) th
            {
                padding-top:5px;
                padding-bottom: 5px;
                padding-left: 15px;
                padding-right: 15px;
            }

            table:not([class]) td
            {
                border-top: .05rem solid var(--md-table-border-rows-color);
                border-right: 1px solid var(--md-table-border-rows-color);
                padding-left: 15px;
                padding-top: 5px;
                padding-bottom: 5px;
                padding-right: 15px;
                color: var(--md-table-text-right-color);
            }

            table > tbody > tr > td:first-child
            {
                white-space: nowrap;
                min-width: 25%;
                border-right: 1px solid var(--md-table-border-rows-color);
                background-color: var(--md-table-body-left-color);
                color: var(--md-table-text-left-color);
            }

            table thead
            {
                background-color: var(--md-table-head-bg-color);
                color: var(--md-table-head-text-color);
                text-align: left;
            }

            /*
                First row of table nowrap
            */

            table > thead > tr > th:first-child
            {
                white-space: nowrap;
            }

            table:not([class])
            {
                display: table;
                border: .05rem solid var(--md-table-border-rows-color);
            }

            /*!
                markdown > footnotes
            */

                .footnotes {
                    opacity: var(--md-footnote-opacity-min);
                }

                .footnotes:hover {
                    opacity: var(--md-footnote-opacity-full);
                }

                [data-footnote-ref]::before {
                content: '[';
                }

                [data-footnote-ref]::after {
                content: ']';
                }

            /*!
                markdown > alerts

                these are similar to the ones on github
            */

                .markdown-alert {
                    padding-bottom: 5px;
                    padding-top: 5px;
                    padding-left: 20px;
                    margin-bottom: 10px;
                    margin-top: 10px;
                    color: inherit;
                    background-color: var(--md-alert-bg-color);
                    border-radius: 4px;
                    width: 100%;
                    border-left: var(--md-alert-border-style);
                    margin-left: auto;
                    margin-right: auto;
                }

                .markdown-alert-title {
                    display: inline-flex;
                    align-items: center;
                    font-weight: 500;
                }

                .markdown-alert-note {
                    border-left-color: var(--md-alert-note-color);
                }

                .markdown-alert-tip {
                    border-left-color: var(--md-alert-tip-color);
                }

                .markdown-alert-important {
                    border-left-color: var(--md-alert-important-color);
                }

                .markdown-alert-warning {
                    border-left-color: var(--md-alert-warning-color);
                }

                .markdown-alert-caution {
                    border-left-color: var(--md-alert-caution-color);
                }

                .markdown-alert-note > .markdown-alert-title {
                    color: var(--md-alert-note-color);
                }

                .markdown-alert-tip > .markdown-alert-title {
                    color: var(--md-alert-tip-color);
                }

                .markdown-alert-important > .markdown-alert-title {
                    color: var(--md-alert-important-color);
                }

                .markdown-alert-warning > .markdown-alert-title {
                    color: var(--md-alert-warning-color);
                }

                .markdown-alert-caution > .markdown-alert-title {
                    color: var(--md-alert-caution-color);
                }

        }

        &-data {
            > image {
                width: 100%;
            }
            > pre {
                white-space: pre-wrap;
            }
        }
        &-download-text {
            user-select: none;
            position: absolute;
            bottom: $base-padding-v;
            right: $base-padding-h;
            opacity: 0.25;
            display: none;
            @include nomobile {
                display: block;
            }
        }
        &-icon {
            display: none;
        }
        &--empty {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;
            justify-content: flex-start;
            align-self: flex-start;
            align-items: center;
            text-align: center;
            .details__attachment-preview-icon {
                display: block;
                font-size: 10em;
            }
            .details__attachment-preview-download-text {
                position: static;
                margin-top: $large-padding;
                opacity: 1;
            }
            .details__attachment-preview-buttons {
                margin-top: $large-padding;
            }
            .details__attachment-preview-data {
                padding-top: $large-padding;
            }
        }
    }

    &__issues {
        margin-top: $base-padding-v;
        color: var(--text-contrast-error-color);
        background-color: var(--error-color);
        border-radius: var(--block-border-radius);
        display: flex;
        align-items: stretch;
        flex-direction: row;
        justify-content: flex-start;

        &-body {
            padding: $medium-padding-v 0;
            flex-grow: 1;
            > a {
                color: var(--text-contrast-error-color);
            }
        }
        &-icon {
            padding: $medium-padding;
            width: 1em;
            &-spin {
                display: none;
                .details__issues-icon--loading & {
                    display: inline-block;
                }
            }
            &-warning {
                .details__issues-icon--loading & {
                    display: none;
                }
            }
        }
        &-close-btn {
            padding: $medium-padding;
            cursor: pointer;
            align-self: flex-start;
            opacity: 0.8;
            transition: opacity $base-duration $base-timing;
            &:hover {
                opacity: 1;
            }
        }
    }

    &__buttons {
        display: flex;
        align-items: stretch;
        flex-direction: row;
        flex-shrink: 0;
        justify-content: flex-start;
        margin-top: $base-padding-v;

        .details--drag & {
            display: none;
        }

        &-trash,
        &-trash-del {
            @include icon-btn($error: true);
            align-self: flex-end;
            margin-right: 10px;
        }

        &-trash-del {
            color: var(--muted-color);
        }

        button ~ button {
            margin-left: $small-spacing;
        }
    }

    &__history {
        flex: 1 0 auto;
        display: flex;
        align-items: stretch;
        flex-direction: column;
        justify-content: flex-start;
        max-width: 100%;
        &-top {

            :hover .details__history-timeline-item {
                opacity: 0.4;
                transition: opacity .3s ease-in-out;
            }

            .details__history-timeline-item:hover {
                opacity: 1;
                transition: opacity .3s ease-in-out;
            }

            .details__history-timeline-item {
                opacity: 1;
                transition: opacity .3s ease-in-out;
            }

            flex: 0 0 auto;
            display: flex;
            align-items: stretch;
            flex-direction: row;
            justify-content: flex-start;
            padding-right: $base-padding-h;
            margin-right: 20px;
        }
        &-desc {
            user-select: none;
        }
        &-timeline {
            flex: 1 0 auto;
            position: relative;
            height: 44px;
            margin-left: 5px;
            &-axis {
                width: 100%;
                position: absolute;
                top: 9px;
                border-bottom: light-border();
            }
            &-item {
                position: absolute;
                top: 0;
                cursor: pointer;
                &:hover {
                    color: var(--text-semi-muted-color);
                    transform: scale( 1.3 );
                    cursor: pointer;
                    animation-name: atx-tcv2-anim-scale-in;
                    animation-duration: 0.3s;
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    background: none;
                }
                &--active,
                &--active:hover {
                    z-index: $z-index-no-modal;
                    cursor: default;
                    color: var(--action-color);
                    opacity: 1 !important;
                    transform: scale( 1.3 );
                    animation-name: atx-tcv2-anim-scale-in;
                    animation-duration: 0.3s;
                    animation-timing-function: ease-in-out;
                    animation-iteration-count: 1;
                    animation-direction: normal;
                    background: none;
                }
            }
            &-label {
                position: absolute;
                top: 16px;
                white-space: nowrap;
                transform: translateX(-50%);
                color: var(--muted-color);
            }
        }
        &-arrow-prev,
        &-arrow-next {
            transform: scaleX(2);
            transform-origin: left top;
            cursor: pointer;
            position: absolute;
            top: 30px;
            font-size: 14px;
            &:hover {
                color: var(--text-semi-muted-color);
            }
        }
        &-arrow-prev {
            left: -5px;
        }
        &-arrow-next {
            right: 5px;
        }
        &-close {
            margin-left: 20px;
        }
        &-body {
            flex: 1 1 auto;
        }
        &-buttons {
            user-select: none;
            align-self: flex-end;
            margin-bottom: $base-padding-v;
            padding-right: $base-padding-h;
            margin-right: 20px;
        }
    }

    &__dropzone {
        display: none;
        .details--drag & {
            display: flex;
            flex-direction: column;
            flex: 1 0 auto;
            justify-content: center;
            align-self: center;
            align-items: center;
            text-align: center;
        }
        &-icon {
            font-size: 10em;
        }
        &-header {
            margin-top: 1em;
        }
    }

    &__field-autocomplete {
        position: absolute;
        overflow: hidden;
        @include common-dropdown;
        &-item {
            padding: $base-padding;
            display: inline-block;
            word-break: break-all;
            @include area-selectable();
            &--selected {
                background-color: var(--secondary-background-color);
            }
        }
    }

    &__subview-close {
        align-self: flex-end;
        float: var(--md-header-return-align);
        cursor: pointer;
        user-select: none;
        margin-bottom: 20px;
        &-post {
            margin-left: $tiny-spacing;
            margin-right: $small-spacing;
            position: relative;
            top: 0.2em;
        }
        &-pre,
        &-post {
            display: none;
        }
        @include mobile {
            line-height: $mobile-back-button-height;
            height: $mobile-back-button-height;
            padding: $base-padding;
            font-size: 1.2em;
            > i {
                margin-right: 0.7em;
                font-size: 1.2em;
                vertical-align: middle;
                position: relative;
                top: -0.15em;
            }
            &-pre {
                display: inline;
            }
        }
        @include nomobile {
            &-post {
                display: inline;
            }
        }
    }
}
